//
//
//
// var date_1_dom= document.getElementById('date_1');
//
// date_1_dom.addEventListener('change',changecallback);
//
// function changecallback(){
//
//     console.log('选择的日期是：'+date_1_dom.value);
//     var inputdate = date_1_dom.value;
//     $.ajax({
//         url:'/get_history_data/<inputdate>',
//         method:'GET',
//         success:function (data){
//             console.log(data)
//         },
//         error:function (){
//
//         }
//     })
// }


/*
单日历的实现
*/

// 单日历的实现1,2共用部分  start
var data_length
var droll = 0, dpitch, dyaw, dreal_time;
var ddreal_time;
var roll_arr = [];
var pitch_arr = [];
var yaw_arr = [];
var time_arr = [];
var time_new_date = [];

var shifttime;

var checkdate;

// 单日历的实现1,2共用部分  end


// 单日历的实现1. 使用 daterangepicker 的日期选择器 start

$('input[name="singledatePicker"]').daterangepicker({


    "autoApply": false, //选择日期后自动提交;只有在不显示时间的时候起作用timePicker:false

    singleDatePicker: true, //单日历

    showDropdowns: true, //年月份下拉框

    timePicker: false, //显示时间

    timePicker24Hour: false, //时间制

    timePickerSeconds: false, //时间显示到秒

    startDate: moment().startOf('day'),//设置开始日期

    maxDate: moment(new Date()), //设置最大日期

    "opens": "center",

    //不显示当前的日期
    autoUpdateInput: false,

    showWeekNumbers: true,

    locale: {

        format: "YYYY-MM-DD HH:mm:ss", //设置显示格式

        applyLabel: '确定', //确定按钮文本

        cancelLabel: '取消', //取消按钮文本

        daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],

        monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',

            '七月', '八月', '九月', '十月', '十一月', '十二月'

        ],

        firstDay: 1

    },

}, function (start) {

    console.log(start.format('YYYY-MM-DD HH:mm:ss'));
    checkdate = start.format('YYYY-MM-DD');
    console.log(checkdate);

    changecallback();

    $('input[name="singledatePicker"]').val(start.format('YYYY-MM-DD'));

});
// 单日历的实现1. 使用 daterangepicker 的日期选择器 end




//单日历的实现2. 使用 html中的input原生日期选择器  start
// var date_1_dom = document.getElementById('date_1');
//
// date_1_dom.addEventListener('change', changecallback);

//单日历的实现2. 使用 html中的input原生日期选择器  end



//数据加载不能再ajax的success外进行，否则会失效
function data_load() {
    for (i = 0; i < data_length; i++) {
        roll_arr.push(data[i].roll);
        pitch_arr.push(data[i].pitch);
        yaw_arr.push(data[i].yaw);
        time_arr.push(data[i].time);
    }
    console.log(roll_arr);
    console.log(pitch_arr);
    console.log(yaw_arr);
    console.log(time_arr);

}

// 单日历的实现1,2共用部分  start

function data_clear() {
    roll_arr.length = 0;
    pitch_arr.length = 0;
    yaw_arr.length = 0;
    time_arr.length = 0;

}

function changecallback() {
    // 日期选择器2调试代码
    // console.log('选择的日期是：' + date_1_dom.value);
    // var inputdate = date_1_dom.value;

    // 日期选择器1调试代码
    var inputdate = checkdate;
    console.log('选择的日期是：' + checkdate);


    $.ajax({
        url: '/get_history_data',
        type: 'GET',
        data: {
            inputdate: inputdate
        },
        success: function (data) {
            data_clear();
            console.log(data)
            console.log(data[0])
            console.log(data.length)
            data_length = data.length;
            for (i = 0; i < data_length; i++) {
                roll_arr.push(data[i].roll);
                pitch_arr.push(data[i].pitch);
                yaw_arr.push(data[i].yaw);
                //time_arr.push(data[i].time);
                const get_date_string =  data[i].time +'+0800 (中国标准时间)';
                time_new_date[i] = new Date(get_date_string);

                const formattedTime = time_new_date[i].toLocaleString().replace(/[\s,\/]/g, '-');

                // console.log(formattedTime);

                time_arr.push(formattedTime);

                // time_arr.push([
                //     time_new_date[i].getFullYear(),
                //     time_new_date[i].getMonth() + 1,
                //     time_new_date[i].getDate(),
                //     time_new_date[i].getHours(),
                //     time_new_date[i].getMinutes(),
                //     time_new_date[i].getSeconds()
                // ].join('-'));
            }
            console.log(roll_arr);
            console.log(pitch_arr);
            console.log(yaw_arr);
            console.log(time_arr);

            myChart = echarts.init(document.querySelector('.real_time .chart'));

            option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        lineStyle: {
                            color: "#dddc6b"
                        }
                    }
                },
                legend: {
                    top: "0%",
                    textStyle: {
                        color: "rgba(255,255,255,.5)",
                        fontSize: "12"
                    }
                },
                grid: {
                    left: "10",
                    top: "30",
                    right: "10",
                    bottom: "10",
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: time_arr
                },
                yAxis: {
                    type: 'value'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['翻滚角', '俯仰角', '航向角']
                },
                series: [
                    {
                        name: '翻滚角',
                        type: 'line',
                        smooth: true,
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                color: "#1c84c6",
                                width: 2
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "rgba(1, 132, 213, 0.4)"
                                        },
                                        {
                                            offset: 0.8,
                                            color: "rgba(1, 132, 213, 0.1)"
                                        }
                                    ],
                                    false
                                ),
                                shadowColor: "rgba(0, 0, 0, 0.1)"
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: "#1c84c6",
                                borderColor: "rgba(221, 220, 107, .1)",
                                borderWidth: 12
                            }
                        },
                        data: roll_arr
                    },
                    {
                        name: '俯仰角',
                        type: 'line',
                        smooth: true,
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                color: "#ee82ee",
                                width: 2
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "rgba(255,182,193, 0.4)"
                                        },
                                        {
                                            offset: 0.8,
                                            color: "rgba(255,182,193, 0.1)"
                                        }
                                    ],
                                    false
                                ),
                                shadowColor: "rgba(0, 0, 0, 0.1)"
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: "#ee82ee",
                                borderColor: "rgba(221, 220, 107, .1)",
                                borderWidth: 12
                            }
                        },
                        data: pitch_arr

                    },
                    {
                        name: '航向角',
                        type: 'line',
                        smooth: true,
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                color: "#00d887",
                                width: 2
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "rgba(0, 216, 135, 0.4)"
                                        },
                                        {
                                            offset: 0.8,
                                            color: "rgba(0, 216, 135, 0.1)"
                                        }
                                    ],
                                    false
                                ),
                                shadowColor: "rgba(0, 0, 0, 0.1)"
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: "#00d887",
                                borderColor: "rgba(221, 220, 107, .1)",
                                borderWidth: 12
                            }
                        },
                        data: yaw_arr

                    }



                ]
            };
            myChart.setOption(option);

            window.addEventListener("resize", function () {
                myChart.resize();
            });
            // option && myChart.setOption(option);


        },
        error: function () {
            // 错误处理
            alert('出错了')
        }
    });
}

// 单日历的实现1,2共用部分  end
